<script>
import MAIN_STORE from "@/store/store.js";
import { Expand, Fold } from "@element-plus/icons-vue";
const layerObj = {}
function loadGeoServerReso(layerName) {
  var gridsetName = 'EPSG:4326';
  var gridNames = new Array(22).fill(0).map((v, index) => { return `EPSG:4326:${index}` })
  var baseUrl = '/geoserver/pipeline/gwc/service/wmts';
  var styleN = '';
  var format = 'application/vnd.mapbox-vector-tile';
  // var infoFormat = 'text/html';
  // var layerName = 'pipeline:WSLINE'
  var projection = new ol.proj.Projection({
    code: 'EPSG:4326',
    units: 'degrees',
    axisOrientation: 'neu'
  });
  var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
  var params = {
    'REQUEST': 'GetTile',
    'SERVICE': 'WMTS',
    'VERSION': '1.0.0',
    'LAYER': layerName,
    'STYLE': styleN,
    'TILEMATRIX': gridsetName + ':{z}',
    'TILEMATRIXSET': gridsetName,
    'FORMAT': format,
    'TILECOL': '{x}',
    'TILEROW': '{y}'
  };

  function constructSource() {
    var url = baseUrl + '?'
    for (var param in params) {
      url = url + param + '=' + params[param] + '&';
    }
    url = url.slice(0, -1);

    var source = new ol.source.VectorTile({
      url: url,
      format: new ol.format.MVT({}),
      projection: projection,
      tileGrid: new ol.tilegrid.WMTS({
        tileSize: [256, 256],
        origin: [-180.0, 90.0],
        resolutions: resolutions,
        matrixIds: gridNames
      }),
      wrapX: true
    });
    return source;
  }
  function simpleStyle(feature) {
    const pro = feature.getProperties();
    pro.corlor = pro.corlor || pro.color || pro['颜色']
    const color = pro.corlor ? `rgb(${pro.corlor})` : '#ffe500'
    return new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: color,
        width: 2
      })
    })
  }

  var layer = new ol.layer.VectorTile({
    source: constructSource(),
    style: simpleStyle
  });

  layerObj[layerName] = layer;

  layer.setZIndex(10);
  MAIN_STORE.GLOBAL_MAP_INS.addLayer(layer);
}

export default {
  /**
   * 图层树
  */
  name: "layer-tree",
  components: { Expand, Fold },
  data() {
    return {
      // 默认坍缩状态
      collapsed: true,
      valueFlow: false,
      valueLegend: false,
      defaultProps: {
        children: "children",
        label: "name",
        class: "self-tree-item",
      },
      treeData: [
        {
          name: "污水",
          children: [
            {
              name: "污水管线",
              id: "pipeline:WSLINE",
              layerName: "pipeline:WSLINE",
              isLeaf: true,
              children: []
            },
            {
              name: "污水管点",
              id: "pipeline:WSPOINT",
              layerName: "pipeline:WSPOINT",
              isLeaf: true,
              children: []
            }
          ]
        },
        {
          name: "雨水",
          children: [
            {
              name: "雨水管线",
              id: "pipeline:YSLINE",
              layerName: "pipeline:YSLINE",
              isLeaf: true
            },
            {
              name: "雨水管点",
              id: "pipeline:YSPOINT",
              layerName: "pipeline:YSPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "军用",
          children: [
            {
              name: "军用管线",
              id: "pipeline:JYLINE",
              layerName: "pipeline:JYLINE",
              isLeaf: true
            },
            {
              name: "军用管点",
              id: "pipeline:JYPOINT",
              layerName: "pipeline:JYPOINT",
              isLeaf: true
            }
          ]
        },
        // {
        //   name: "雨污合流",
        //   children: [
        //     {
        //       name: "雨污合流管线",
        //       id: "pipeline:HSLINE",
        //       layerName: "pipeline:HSLINE",
        //       isLeaf: true
        //     },
        //     {
        //       name: "雨污合流管点",
        //       id: "pipeline:HSPOINT",
        //       layerName: "pipeline:HSPOINT",
        //       isLeaf: true
        //     }
        //   ]
        // },
        {
          name: "中水",
          children: [
            {
              name: "中水管线",
              id: "pipeline:ZSLINE",
              layerName: "pipeline:ZSLINE",
              isLeaf: true
            },
            {
              name: "中水管点",
              id: "pipeline:ZSPOINT",
              layerName: "pipeline:ZSPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "煤气",
          children: [
            {
              name: "煤气管线",
              id: "pipeline:MQLINE",
              layerName: "pipeline:MQLINE",
              isLeaf: true
            },
            {
              name: "煤气管点",
              id: "pipeline:MQPOINT",
              layerName: "pipeline:MQPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "天然气",
          children: [
            {
              name: "天然气管线",
              id: "pipeline:TRLINE",
              layerName: "pipeline:TRLINE",
              isLeaf: true
            },
            {
              name: "天然气管点",
              id: "pipeline:TRPOINT",
              layerName: "pipeline:TRPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "热水",
          children: [
            {
              name: "热水管线",
              id: "pipeline:RSLINE",
              layerName: "pipeline:RSLINE",
              isLeaf: true
            },
            {
              name: "热水管点",
              id: "pipeline:RSPOINT",
              layerName: "pipeline:RSPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "蒸汽",
          children: [
            {
              name: "蒸汽管线",
              id: "pipeline:ZQLINE",
              layerName: "pipeline:ZQLINE",
              isLeaf: true
            },
            {
              name: "蒸汽管点",
              id: "pipeline:ZQPOINT",
              layerName: "pipeline:ZQPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "路灯",
          children: [
            {
              name: "路灯管线",
              id: "pipeline:LDLINE",
              layerName: "pipeline:LDLINE",
              isLeaf: true
            },
            {
              name: "路灯管点",
              id: "pipeline:LDPOINT",
              layerName: "pipeline:LDPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "交通信号",
          children: [
            {
              name: "交通信号管线",
              id: "pipeline:XHLINE",
              layerName: "pipeline:XHLINE",
              isLeaf: true
            },
            {
              name: "交通信号管点",
              id: "pipeline:XHPOINT",
              layerName: "pipeline:XHPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "有线电视",
          children: [
            {
              name: "有线电视管线",
              id: "pipeline:DSLINE",
              layerName: "pipeline:DSLINE",
              isLeaf: true
            },
            {
              name: "有线电视管点",
              id: "pipeline:DSPOINT",
              layerName: "pipeline:DSPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "广播",
          children: [
            {
              name: "广播管线",
              id: "pipeline:GBLINE",
              layerName: "pipeline:GBLINE",
              isLeaf: true
            },
            {
              name: "广播管点",
              id: "pipeline:GBPOINT",
              layerName: "pipeline:GBPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "综合管沟",
          children: [
            {
              name: "综合管沟管线",
              id: "pipeline:ZHLINE",
              layerName: "pipeline:ZHLINE",
              isLeaf: true
            },
            {
              name: "综合管沟管点",
              id: "pipeline:ZHPOINT",
              layerName: "pipeline:ZHPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "不明管线",
          children: [
            {
              name: "不明管线",
              id: "pipeline:BMLINE",
              layerName: "pipeline:BMLINE",
              isLeaf: true
            },
            {
              name: "不明管点",
              id: "pipeline:BMPOINT",
              layerName: "pipeline:BMPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "电信管线",
          children: [
            {
              name: "电信管线管线",
              id: "pipeline:DXLINE",
              layerName: "pipeline:DXLINE",
              isLeaf: true
            },
            {
              name: "电信管线管点",
              id: "pipeline:DXPOINT",
              layerName: "pipeline:DXPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "电力通信",
          children: [
            {
              name: "电力通信管线",
              id: "pipeline:EXLINE",
              layerName: "pipeline:EXLINE",
              isLeaf: true
            },
            {
              name: "电力通信管点",
              id: "pipeline:EXPOINT",
              layerName: "pipeline:EXPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "监控信号",
          children: [
            {
              name: "监控信号管线",
              id: "pipeline:JKLINE",
              layerName: "pipeline:JKLINE",
              isLeaf: true
            },
            {
              name: "监控信号管点",
              id: "pipeline:JKPOINT",
              layerName: "pipeline:JKPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "给水",
          children: [
            {
              name: "给水管线",
              id: "pipeline:JSLINE",
              layerName: "pipeline:JSLINE",
              isLeaf: true
            },
            {
              name: "给水管点",
              id: "pipeline:JSPOINT",
              layerName: "pipeline:JSPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "陆地长输",
          children: [
            {
              name: "陆地长输管线",
              id: "pipeline:LCLINE",
              layerName: "pipeline:LCLINE",
              isLeaf: true
            },
            {
              name: "陆地长输管点",
              id: "pipeline:LCPOINT",
              layerName: "pipeline:LCPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "联通管线",
          children: [
            {
              name: "联通管线管线",
              id: "pipeline:LTLINE",
              layerName: "pipeline:LTLINE",
              isLeaf: true
            },
            {
              name: "联通管线管点",
              id: "pipeline:LTPOINT",
              layerName: "pipeline:LTPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "公共自行车",
          children: [
            {
              name: "公共自行车管线",
              id: "pipeline:PBLINE",
              layerName: "pipeline:PBLINE",
              isLeaf: true
            },
            {
              name: "公共自行车管点",
              id: "pipeline:PBPOINT",
              layerName: "pipeline:PBPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "石油",
          children: [
            {
              name: "石油管线",
              id: "pipeline:SYLINE",
              layerName: "pipeline:SYLINE",
              isLeaf: true
            },
            {
              name: "石油管点",
              id: "pipeline:SYPOINT",
              layerName: "pipeline:SYPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "移动管线",
          children: [
            {
              name: "移动管线管线",
              id: "pipeline:YDLINE",
              layerName: "pipeline:YDLINE",
              isLeaf: true
            },
            {
              name: "移动管线管点",
              id: "pipeline:YDPOINT",
              layerName: "pipeline:YDPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "输水",
          children: [
            {
              name: "输水管线",
              id: "pipeline:SSLINE",
              layerName: "pipeline:SSLINE",
              isLeaf: true
            },
            {
              name: "输水管点",
              id: "pipeline:SSPOINT",
              layerName: "pipeline:SSPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "配水",
          children: [
            {
              name: "配水管线",
              id: "pipeline:JPLINE",
              layerName: "pipeline:JPLINE",
              isLeaf: true
            },
            {
              name: "配水管点",
              id: "pipeline:JPPOINT",
              layerName: "pipeline:JPPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "直饮水",
          children: [
            {
              name: "直饮水管线",
              id: "pipeline:JZLINE",
              layerName: "pipeline:JZLINE",
              isLeaf: true
            },
            {
              name: "直饮水管点",
              id: "pipeline:JZPOINT",
              layerName: "pipeline:JZPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "消防水",
          children: [
            {
              name: "消防水管线",
              id: "pipeline:XSLINE",
              layerName: "pipeline:XSLINE",
              isLeaf: true
            },
            {
              name: "消防水管点",
              id: "pipeline:XSPOINT",
              layerName: "pipeline:XSPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "绿化水",
          children: [
            {
              name: "绿化水管线",
              id: "pipeline:LSLINE",
              layerName: "pipeline:LSLINE",
              isLeaf: true
            },
            {
              name: "绿化水管点",
              id: "pipeline:LSPOINT",
              layerName: "pipeline:LSPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "循环水",
          children: [
            {
              name: "循环水管线",
              id: "pipeline:JHLINE",
              layerName: "pipeline:JHLINE",
              isLeaf: true
            },
            {
              name: "循环水管点",
              id: "pipeline:JHPOINT",
              layerName: "pipeline:JHPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "液化气",
          children: [
            {
              name: "液化气管线",
              id: "pipeline:YHLINE",
              layerName: "pipeline:YHLINE",
              isLeaf: true
            },
            {
              name: "液化气管点",
              id: "pipeline:YHPOINT",
              layerName: "pipeline:YHPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "供电",
          children: [
            {
              name: "供电管线",
              id: "pipeline:GDLINE",
              layerName: "pipeline:GDLINE",
              isLeaf: true
            },
            {
              name: "供电管点",
              id: "pipeline:GDPOINT",
              layerName: "pipeline:GDPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "电车",
          children: [
            {
              name: "电车管线",
              id: "pipeline:DCLINE",
              layerName: "pipeline:DCLINE",
              isLeaf: true
            },
            {
              name: "电车管点",
              id: "pipeline:DCPOINT",
              layerName: "pipeline:DCPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "广告",
          children: [
            {
              name: "广告管线",
              id: "pipeline:GGLINE",
              layerName: "pipeline:GGLINE",
              isLeaf: true
            },
            {
              name: "广告管点",
              id: "pipeline:GGPOINT",
              layerName: "pipeline:GGPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "电话",
          children: [
            {
              name: "电话管线",
              id: "pipeline:DHLINE",
              layerName: "pipeline:DHLINE",
              isLeaf: true
            },
            {
              name: "电话管点",
              id: "pipeline:DHPOINT",
              layerName: "pipeline:DHPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "信息网络",
          children: [
            {
              name: "信息网络管线",
              id: "pipeline:XXLINE",
              layerName: "pipeline:XXLINE",
              isLeaf: true
            },
            {
              name: "信息网络管点",
              id: "pipeline:XXPOINT",
              layerName: "pipeline:XXPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "氢气",
          children: [
            {
              name: "氢气管线",
              id: "pipeline:QQLINE",
              layerName: "pipeline:QQLINE",
              isLeaf: true
            },
            {
              name: "氢气管点",
              id: "pipeline:QQPOINT",
              layerName: "pipeline:QQPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "氧气",
          children: [
            {
              name: "氧气管线",
              id: "pipeline:YQLINE",
              layerName: "pipeline:YQLINE",
              isLeaf: true
            },
            {
              name: "氧气管点",
              id: "pipeline:YQPOINT",
              layerName: "pipeline:YQPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "乙炔",
          children: [
            {
              name: "乙炔管线",
              id: "pipeline:GQLINE",
              layerName: "pipeline:GQLINE",
              isLeaf: true
            },
            {
              name: "乙炔管点",
              id: "pipeline:GQPOINT",
              layerName: "pipeline:GQPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "乙烯",
          children: [
            {
              name: "乙烯管线",
              id: "pipeline:YXLINE",
              layerName: "pipeline:YXLINE",
              isLeaf: true
            },
            {
              name: "乙烯管点",
              id: "pipeline:YXPOINT",
              layerName: "pipeline:YXPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "苯",
          children: [
            {
              name: "苯管线",
              id: "pipeline:BQLINE",
              layerName: "pipeline:BQLINE",
              isLeaf: true
            },
            {
              name: "苯管点",
              id: "pipeline:BQPOINT",
              layerName: "pipeline:BQPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "氯气",
          children: [
            {
              name: "氯气管线",
              id: "pipeline:LQLINE",
              layerName: "pipeline:LQLINE",
              isLeaf: true
            },
            {
              name: "氯气管点",
              id: "pipeline:LQPOINT",
              layerName: "pipeline:LQPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "氮气",
          children: [
            {
              name: "氮气管线",
              id: "pipeline:DQLINE",
              layerName: "pipeline:DQLINE",
              isLeaf: true
            },
            {
              name: "氮气管点",
              id: "pipeline:DQPOINT",
              layerName: "pipeline:DQPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "二氧化碳",
          children: [
            {
              name: "二氧化碳管线",
              id: "pipeline:EYLINE",
              layerName: "pipeline:EYLINE",
              isLeaf: true
            },
            {
              name: "二氧化碳管点",
              id: "pipeline:EYPOINT",
              layerName: "pipeline:EYPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "氨气",
          children: [
            {
              name: "氨气管线",
              id: "pipeline:AQLINE",
              layerName: "pipeline:AQLINE",
              isLeaf: true
            },
            {
              name: "氨气管点",
              id: "pipeline:AQPOINT",
              layerName: "pipeline:AQPOINT",
              isLeaf: true
            }
          ]
        },
        {
          name: "甲苯",
          children: [
            {
              name: "甲苯管线",
              id: "pipeline:JBLINE",
              layerName: "pipeline:JBLINE",
              isLeaf: true
            },
            {
              name: "甲苯管点",
              id: "pipeline:JBPOINT",
              layerName: "pipeline:JBPOINT",
              isLeaf: true
            }
          ]
        },
        // {
        //   name: "缺陷点",
        //   id: "que-xian-dian",
        //   isLeaf: true
        // }
      ],
      defaultCheckedKeys: [
        "pipeline:WSLINE",
        "pipeline:WSPOINT",
        "pipeline:YSLINE",
        "pipeline:YSPOINT",
        // "pipeline:JYLINE",
        // "pipeline:JYPOINT",
        // "pipeline:HSLINE",
        // "pipeline:HSPOINT",
        // "pipeline:ZSLINE",
        // "pipeline:ZSPOINT",
        // "pipeline:MQLINE",
        // "pipeline:MQPOINT",
        // "pipeline:TRLINE",
        // "pipeline:TRPOINT",
        // "pipeline:RSLINE",
        // "pipeline:RSPOINT",
        // "pipeline:ZQLINE",
        // "pipeline:ZQPOINT",
        // "pipeline:LDLINE",
        // "pipeline:LDPOINT",
        // "pipeline:XHLINE",
        // "pipeline:XHPOINT",
        // "pipeline:DSLINE",
        // "pipeline:DSPOINT",
        // "pipeline:GBLINE",
        // "pipeline:GBPOINT",
        // "pipeline:ZHLINE",
        // "pipeline:ZHPOINT",
        // "pipeline:BMLINE",
        // "pipeline:BMPOINT",
        // "pipeline:DXLINE",
        // "pipeline:DXPOINT",
        // "pipeline:EXLINE",
        // "pipeline:EXPOINT",
        // "pipeline:JKLINE",
        // "pipeline:JKPOINT",
        // "pipeline:JSLINE",
        // "pipeline:JSPOINT",
        // "pipeline:LCLINE",
        // "pipeline:LCPOINT",
        // "pipeline:LTLINE",
        // "pipeline:LTPOINT",
        // "pipeline:PBLINE",
        // "pipeline:PBPOINT",
        // "pipeline:SYLINE",
        // "pipeline:SYPOINT",
        // "pipeline:YDLINE",
        // "pipeline:YDPOINT",
        // "pipeline:SSLINE",
        // "pipeline:SSPOINT",
        // "pipeline:JPLINE",
        // "pipeline:JPPOINT",
        // "pipeline:JZLINE",
        // "pipeline:JZPOINT",
        // "pipeline:XSLINE",
        // "pipeline:XSPOINT",
        // "pipeline:LSLINE",
        // "pipeline:LSPOINT",
        // "pipeline:JHLINE",
        // "pipeline:JHPOINT",
        // "pipeline:YHLINE",
        // "pipeline:YHPOINT",
        // "pipeline:GDLINE",
        // "pipeline:GDPOINT",
        // "pipeline:DCLINE",
        // "pipeline:DCPOINT",
        // "pipeline:GGLINE",
        // "pipeline:GGPOINT",
        // "pipeline:DHLINE",
        // "pipeline:DHPOINT",
        // "pipeline:XXLINE",
        // "pipeline:XXPOINT",
        // "pipeline:QQLINE",
        // "pipeline:QQPOINT",
        // "pipeline:YQLINE",
        // "pipeline:YQPOINT",
        // "pipeline:GQLINE",
        // "pipeline:GQPOINT",
        // "pipeline:YXLINE",
        // "pipeline:YXPOINT",
        // "pipeline:BQLINE",
        // "pipeline:BQPOINT",
        // "pipeline:LQLINE",
        // "pipeline:LQPOINT",
        // "pipeline:DQLINE",
        // "pipeline:DQPOINT",
        // "pipeline:EYLINE",
        // "pipeline:EYPOINT",
        // "pipeline:AQLINE",
        // "pipeline:AQPOINT",
        // "pipeline:JBLINE",
        // "pipeline:JBPOINT"
      ],
    };
  },
  computed: {
    showLegend() {
      const tag1 = ['Search', 'Decision'].indexOf(this.$route.name) !== -1
      return tag1 && this.valueLegend
    }
  },
  watch: {
    valueFlow(v) {
      const layers = ['pipeline:WS_YS_LX', 'pipeline:YS_YS_LX'];
      layers.forEach(v_ => {
        if (v) {
          loadGeoServerReso(v_);
        } else {
          MAIN_STORE.GLOBAL_MAP_INS.removeLayer(layerObj[v_]);
          layerObj[v_] = null;
        }
      })
    }
  },
  created() {
    this.$MITT_BUS.on('map-loaded', function () {
      console.log(111)
    })
  },
  mounted() {
    this.initLayer();
  },
  beforeUnmount() { },
  methods: {
    checkChange_(value, tag) {
      const mapIns = MAIN_STORE.GLOBAL_MAP_INS;
      if (!mapIns) {
        return;
      }
      const mapboxStyle = MAIN_STORE.MAPBOX_STYLE;
      if (!mapboxStyle) {
        return;
      }
      const styleObj = MAIN_STORE.STYLE_OBJ;
      if (!styleObj) {
        return;
      }
      const [targetLayer] = styleObj.layers.filter((v) => {
        return v.id === value.id;
      });
      if (!targetLayer) {
        return;
      }
      targetLayer.layout.visibility = tag ? "visible" : "none";
      mapboxStyle.updateStyles(styleObj.layers);
      mapboxStyle.clearSelectedObjects();
      MAIN_STORE.VECTOR_LAYER && MAIN_STORE.VECTOR_LAYER.changed();
    },
    checkChange(value, tag) {
      if (tag) {
        loadGeoServerReso(value.layerName);
      } else {
        const layer = layerObj[value.layerName]
        MAIN_STORE.GLOBAL_MAP_INS.removeLayer(layer);
        layerObj[value.layerName] = null;
      }
    },
    initLayer() {
      if (!MAIN_STORE) { return }
      for (let i = 0; i < this.defaultCheckedKeys.length; i++) {
        const item = this.defaultCheckedKeys[i];
        setTimeout(() => {
          loadGeoServerReso(item);
        }, i * 1000)
      }
    },
    expandAll() {
      this.collapsed = false;
    },
    foldAll() {
      this.collapsed = true;
    },
  },
};
</script>

<template>
  <div class="layer-tree" :class="[
    collapsed ? 'collapsed' : '',
    ['Search', 'Decision'].indexOf($route.name) !== -1 ? 'stick-side' : ''
  ]">
    <div class="header">
      <div v-if="collapsed" class="icon-area colla hover-pointer" @click="expandAll">
        <el-icon>
          <Fold color="#2168b2" />
        </el-icon>
      </div>
      <span v-if="!collapsed" class="title font-alimamashuheiti">
        管线管点列表
      </span>
      <div v-if="!collapsed" class="icon-area expand hover-pointer" @click="foldAll">
        <el-icon>
          <Expand color="#2168b2" />
        </el-icon>
      </div>
    </div>
    <div class="function" v-if="!collapsed">
      <el-switch v-model="valueFlow" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #666666"
        active-text="展示流向" inactive-text="隐藏流向" />
      <el-switch v-if="['Search', 'Decision'].indexOf($route.name) !== -1" v-model="valueLegend" inline-prompt
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #666666; margin-left: 1rem;" active-text="展示图例"
        inactive-text="隐藏图例" />
    </div>

    <el-tree v-show="!collapsed" ref="layerTree" class="self-tree" :data="treeData" :props="defaultProps" node-key="id"
      :check-strictly="true" :default-checked-keys="defaultCheckedKeys" :default-expanded-keys="defaultCheckedKeys"
      @check-change="checkChange" empty-text="暂无数据">
      <template #default="{ node, data }">
        <el-checkbox v-if="node.isLeaf" v-model="node.checked"></el-checkbox>
        <div class="name">
          {{ data.name }}
        </div>
      </template>
    </el-tree>
    <div class="legend" v-if="showLegend">
    </div>
  </div>

</template>
<style>
.self-tree {
  /* width: 50rem;
  --el-font-size-base: 3rem; */
}

.self-tree-item {
  /* --el-tree-node-content-height: 5rem;
  padding: 1rem 0; */
}

.self-tree-item .el-tree-node__label {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.self-tree-item .el-checkbox {
  /* --el-checkbox-input-width: 3rem;
  --el-checkbox-input-height: 3rem; */
}

.self-tree-item .el-tree-node__expand-icon {
  /* font-size: 3rem; */
}

.self-tree-item .el-checkbox__inner::after {
  /* width: 1rem;
  height: 2rem;
  border-width: 0.3rem;
  top: 0rem;
  left: 0.8rem; */
}

.self-tree .el-tree-node:focus>.el-tree-node__content {
  /* background-color: transparent; */
}

.self-tree-item .tubiao {
  /* display: flex;
  flex-direction: row;
  align-items: center;
  width: 10rem;
  height: 100%;
  justify-content: flex-end;
  margin-right: 2rem; */
}

.self-tree-item .tubiao-1 {
  /* display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
  margin-left: 2rem; */
}

.self-tree-item .name {
  /* overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1; */
}
</style>
<style lang="less" scoped>
.layer-tree {
  position: fixed;
  right: 46rem;
  top: 11rem;
  pointer-events: all;
  font-size: 3rem;
  width: 30rem;
  border-radius: initial;
  box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.2);

  &.stick-side {
    right: 2rem;
  }

  &.collapsed {
    width: initial;
    height: initial;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: initial;

    &:hover {
      box-shadow: 0 0 0 0.5rem rgba(255, 255, 255, 0.2);
    }
  }

  &>.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;

    &>.title {
      font-size: 2rem;
      color: #2168b2;
      padding-left: 1rem;
    }

    &>.icon-area {
      width: 4rem;
      height: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2rem;

      &.expand {
        z-index: 2;
      }
    }
  }

  &>.function {
    padding-left: 1rem;
    background-color: #fff;
  }
}

.legend {
  position: fixed;
  bottom: 10rem;
  right: 10rem;
  width: 25rem;
  height: 30rem;
  background-color: #fff;
  background-image: url(@/assets/images/legend.jpg);
  background-size: 100% 100%;
}

.self-tree {
  max-height: 50rem;
  overflow-y: auto;
}
</style>
